<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/include/common_tag.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>登录</title>
		<meta charset="UTF-8" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/lib/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/lib/font-awesome-4.0.3/css/font-awesome.min.css" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/css/animate.css" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/css/login.css" />
	</head>
	<body>
		<div class="navbar navbar-default">
			<div class="navbar-heading">
				<a href="#" class="navbar-brand">
					<img alt="公司Logo" src="images/logo.jpg"/>
				</a>
			</div>
		</div>
		</div>
		<div class="login-container animated flipInY">
			<h3 class="title">Welcome Back</h3>
			<form:form cssClass="form-horizontal" action="login/in" id="form">
				<div class="form-group">
					<input type="text" class="form-control" id="username" name="username" placeholder="用户名"/>
					<i class="fa fa-user"></i>
				</div>
				<div class="form-group">
					<input type="password" class="form-control" id="password" name="password" placeholder="密码"/>
					<i class="fa fa-lock"></i>
				</div>
				<div class="form-group" style="font-size: 14px;height: 1.2em;line-height: 1.2em; margin-left: 25px;">
			     	<div class="checkerbox" id="rememberBtn"></div>记住用户名和密码
			  </div>
				<div class="form-group">
					<button type="button" class="btn-login btn-block" data-loading-text="登录..." id="loginBtn">
						登录
					</button>
				</div>
			</form:form>
		</div>
		<script src="<%=request.getContextPath()%>/lib/jquery-1.11.0.min.js"></script>
		<script src="<%=request.getContextPath()%>/lib/bootstrap/js/bootstrap.min.js"></script>
		<script src="<%=request.getContextPath()%>/lib/tiny/js/tiny-ui.js"></script>
		<script>
			$(function() {
				var username = $('#username');
				var password = $('#password');
				var rememberBtn = $('#rememberBtn').on('click', function(){
					var $this = $(this);
					$this.toggleClass('checked');
				});
				var cookieArr = document.cookie.split(';');
				for(var i=0, j=cookieArr.length; i<j; i++){
					var cookie = cookieArr[i].split('=');
					cookie[0] = cookie[0].replace(/(^\s*)|(\s*$)/g,"")
					if(cookie[0] == 'isRemember'){
						rememberBtn.click();
					}else if(cookie[0] == 'username'){
						username.val(cookie[1]);
					}else if(cookie[0] == 'password'){
						password.val(cookie[1]);
					}
				}
				$('#loginBtn').click(function() {
					var btn = $(this)
					btn.button('正在登录...');
  					var data = {
  						username: username.val(),
  						password: password.val()
  					}
  					if(rememberBtn.hasClass('checked')){
						document.cookie = 'isRemember='+escape('true');
						document.cookie = 'username='+escape(username.val());
						document.cookie = 'password='+escape(password.val())
					}else{
						var exp = new Date();
	    				exp.setTime(exp.getTime() - 1);
						document.cookie = 'isRemember='+escape('')+';expires='+exp.toGMTString();
						document.cookie = 'username='+escape('')+';expires='+exp.toGMTString();
						document.cookie = 'password='+escape('')+';expires='+exp.toGMTString();
					}
  					$.post('login/in', data).done(function(data){
  						if(data.result){
  							window.location.href = data.url;
  						}else{
  							$('#form').message({
  								type: 'error',
  								content: '用户名或密码错误!'
  							});
  						}
  					}).fail(function(err){
  						window.location.href = 'errors/' + err.status + '.html';
  					}).always(function () {
  				        btn.button('reset')
  				    });
				});
				$('body').on('keydown', function(e){
					 if(e.keyCode==13) {
		                $('#loginBtn').click(); 
		            }  
				});
			});
		</script>
	</body>
</html>
